<template>
	<view class="total">
		<view class="oder-info">
			<view class="order-item">
				<view>
					<view class="order-project">
						<text class="order_project_item">{{ '就诊人：' + fapiaoitem.patient_name }}</text>
						<view class="order_project_item">{{ '医院：' + fapiaoitem.hospital_name }}</view>
						<text class="order_project_item">{{ '科室：' + fapiaoitem.department_name }}</text>
					</view>
				</view>
				<view class="footer">
					<view class="price">{{ '￥' + fapiaoitem.order_common_price }}</view>
					<view class="buttom">
						<!-- <view @click="lgetfpApi()">确定申请发票</view> -->
					</view>
				</view>
			</view>
		</view>


		<view class="utabs">
			<view class="utabs_tishi">（专票购买人身份必须是企业，普票可选择是企业还是自然人）</view>
			<u-tabs :list="list1" @click="utabsClick"></u-tabs>
		</view>

		<view class="mineMore">
			<view class="mineMoreAll_radio">
				<text class="mineMoreAll_radio_left">购方身份类型</text>
				<view class="mineMoreAll_radio_right" v-if="utabsItem==1">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio :disabled="true" activeColor="red" @change="radioChange"
							:customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name"></u-radio>
					</u-radio-group>
				</view>

				<view class="mineMoreAll_radio_right" v-if="utabsItem==2">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio activeColor="red" @change="radioChange" :customStyle="{marginRight: '8px'}"
							v-for="(item, index) in radiolist1" :key="index" :label="item.name"
							:name="item.name"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="mineMoreAll">
				<text class="mineMoreAll_left">购方姓名/公司名称</text>
				<view class="mineMoreAll_right">
					<input v-model="lgetfpApiAll.name" type="text" placeholder="请输入购方姓名/公司名称">
				</view>
			</view>
			<!-- 专票的时候必填 -->
			<view class="mineMoreAll" v-if="utabsItem==1">
				<text class="mineMoreAll_left">购买方税号统一社会信用代码</text>
				<view class="mineMoreAll_right">
					<input type="text" v-model="lgetfpApiAll.taxno" placeholder="请输入购买方税号统一社会信用代码">
				</view>
			</view>
			<view class="mineMoreAll">
				<text class="mineMoreAll_left">购买方邮箱</text>
				<view class="mineMoreAll_right">
					<input v-model="lgetfpApiAll.email" type="text" placeholder="请输入购买方邮箱">
				</view>
			</view>

		<!-- 	<view class="mineMoreAll_radio">
				<text class="mineMoreAll_radio_left">购方服务类型</text>
				<view class="mineMoreAll_radio_right">
					<u-radio-group v-model="radiovalue2" placement="row" @change="groupChange2">
						<u-radio activeColor="red" @change="radioChange2" :customStyle="{marginRight: '8px'}"
							v-for="(item, index) in radiolist2" :key="index" :label="item.name"
							:name="item.name"></u-radio>
					</u-radio-group>
				</view>
			</view> -->

			<view class="mineMoreAll">
				<text class="mineMoreAll_left">购买方开票金额</text>
				<view class="mineMoreAll_right">
					{{fapiaoitem.order_common_price}}

					<!-- <input v-model="fapiaoitem.order_common_price" style="pointer-events: none;" type="number"> -->
				</view>
			</view>

			<!-- <view class="mineMoreAll">
				<text class="mineMoreAll_left">购买方税率</text>
				<view class="mineMoreAll_right" v-if="utabsItem==1">
					0.03
				</view>
				<view class="mineMoreAll_right" v-if="utabsItem==2">
					0.01
				</view>
			</view> -->

			<view class="middleLogo">
				<view class="middle_Btn">
					<text class="middle_Btn_one" @click="lgetfpApi">确定申请发票</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fapiaoitem: '',
				utabsItem: 1,

				list1: [{
					name: '专票',
				}, {
					name: '普票',
				}],

				// 基本案列数据
				radiolist1: [{
						name: '企业',
						disabled: false
					},
					{
						name: '自然人',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '企业',

				// 基本案列数据
				radiolist2: [{
						name: '生活服务',
						disabled: false
					},
					{
						name: '现代服务',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue2: '生活服务',
				lgetfpApiAll: {
					buyertype: 1,
					name: '',
					taxno: '',
					email: '',
					scopecode: '3070503000000000000'
				}
			};
		},
		onLoad(option) {
			console.log("============------------11111111")

		},
		onShow() {
			this.fapiaoitem = uni.getStorageSync('fapiaoitem')
			console.log("============------------11111111")
		},
		methods: {
			// 
			utabsClick(item) {
				this.utabsItem = item.index + 1
				console.log('item', item);
			},

			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				if (n == '企业') {
					this.lgetfpApiAll.buyertype = 1
				} else if (n == '自然人') {
					this.lgetfpApiAll.buyertype = 2
				}
			},
			groupChange2(n) {

				console.log('groupChange2', n);
			},
			// radioChange2(n) {
			// 	if (n == '生活服务') {
			// 		this.lgetfpApiAll.scopecode = '3070503000000000000'
			// 	} else if (n == '现代服务') {
			// 		this.lgetfpApiAll.scopecode = '3049900000000000000'
			// 	}
			// 	console.log('radioChange2', n);
			// },


			lgetfpApi() {
				let taxrate = []
				if (this.utabsItem == 1) {
					taxrate = 0.03
				} else if (this.utabsItem == 2) {
					taxrate = 0.01
				}
				
				if(this.lgetfpApiAll.name==''){
					uni.showToast({
						title: '请输入购买方名称/公司名称',
						icon: 'none',
						duration: 2000
					})
					return
				}else if(this.lgetfpApiAll.name==''&&this.utabsItem == 1){
					uni.showToast({
						title: '请输入购买方税号统一社会信用代码',
						icon: 'none',
						duration: 2000
					})
					return
				}else if(this.lgetfpApiAll.email==''){
					uni.showToast({
						title: '请输入购买方邮箱',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.post('/api/newadd/getfp', {
					type: this.utabsItem,
					buyertype: this.lgetfpApiAll.buyertype,
					name: this.lgetfpApiAll.name,
					taxno: this.lgetfpApiAll.taxno,
					email: this.lgetfpApiAll.email,
					// scopecode: this.lgetfpApiAll.scopecode,
					amount: this.fapiaoitem.order_common_price,
					id:this.fapiaoitem.id,
					service_id:this.fapiaoitem.service_id,
					taxrate: taxrate,
				}).then(data => {
					if (res.code == 1) {
						uni.showToast({
							title: '已提交申请',
							duration: 1500,
							icon: 'none'
						});
						setTimeout(()=>{
							uni.switchTab({
								url: `/pages/Order/Order`
							});
						},500)
					}
				});
			},


			fapiao() {
				uni.showToast({
					icon: 'none',
					title: '申请成功，待审核'
				});
				setTimeout(() => {
					uni.switchTab({
						url: `./Order`
					});
				}, 1000)

			}
		}
	};
</script>

<style lang="scss">
	.middleLogo {
		.middle_Btn {
			margin: 50rpx 0;

			.middle_Btn_one {
				display: block;
				width: 630rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #FF2A43;
				border-radius: 46rpx;
				margin: auto;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}

	.utabs {
		padding: 0 30rpx;

		.utabs_tishi {
			color: #787B86;
			font-size: 20rpx;
			text-align: right;
		}

	}

	.nothing {
		text-align: center;
	}

	.oder-info {
		// margin-top: 110rpx;
		// padding-top: 10rpx;
	}

	.mineMore {
		width: 670rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin-top: 20rpx;

		.mineMoreAll_radio {
			padding: 28rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid #F4F4F7;

			// margin-bottom: 20rpx;
			.mineMoreAll_radio_left {
				font-size: 30rpx;
				color: #232832;
				font-weight: bold;
			}

			.mineMoreAll_radio_right {
				margin-left: 30rpx;
			}
		}

		.mineMoreAll {
			padding: 28rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;


			.mineMoreAll_left {
				// width: 30%;
				font-size: 30rpx;
				color: #232832;
				font-weight: bold;
				margin-bottom: 20rpx;

				text {
					font-size: 24rpx;
					color: #787B86;
					font-weight: 400;
					margin-left: 10rpx;
				}
			}

			.mineMoreAll_right {
				display: flex;
				justify-content: flex-start;
				font-size: 24rpx;
				color: #787B86;
				border-bottom: 1px solid #F4F4F7;

				// width: 70%;
				image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 100rpx;
					margin-right: 16rpx;
				}

				input {
					width: 100%;
					// text-align: right;
					font-size: 24rpx;
					color: #787B86;
					border-bottom: 1px solid #F4F4F7;
					padding: 10rpx;
				}

				.region {

					width: 100%;
					// text-align: right;
					font-size: 24rpx;
					color: #787B86;
				}
			}
		}
	}

	.order-item {
		width: 670rpx;
		// height: 340rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx 0;
		margin-top: 20rpx;

		.order-status {
			display: flex;
			justify-content: space-between;
			height: 70rpx;
			align-items: center;
			margin: 0 40rpx;
			// border-bottom: 1rpx solid #E4E4E4;

			.oderNumber {
				font-weight: bold;
				color: #000000;
				font-size: 32rpx;
			}

			.orderStatus {
				color: red;
				font-size: 28rpx;
			}
		}

		.order-project {
			margin: 0 40rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			font-size: 28rpx;
			color: #666666;
			border-bottom: 1rpx solid #f4f4f4;

			.order_project_item {
				width: 100%;
				height: 36rpx;
				margin: 10rpx 0;
				line-height: 36rpx;
			}
		}

		.footer {
			display: flex;
			flex-direction: row;
			height: 100rpx;
			align-items: center;
			justify-content: space-between;

			.price {
				font-size: 32rpx;
				color: #fb4b6c;
				font-weight: bold;
				margin-left: 50rpx;
				margin-right: 50rpx;
			}

			.buttom {
				display: flex;
				justify-content: flex-end;
				width: 400rpx;
				margin-right: 40rpx;

				view {
					width: 200rpx;
					height: 56rpx;
					line-height: 56rpx;
					border: solid 1rpx #58d3ae;
					font-size: 28rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #000;
				}

				view:nth-child(2) {
					margin-left: 20rpx;
					background-color: #58d3ae;
					color: #ffffff;
				}
			}

			.buttom-jinxing {
				width: 200rpx;
				height: 56rpx;
				margin-right: 40rpx;
				line-height: 56rpx;
				border: solid 1rpx #58d3ae;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #ffffff;
				margin-left: 100rpx;
				background-color: #58d3ae;
				margin-left: 180rpx;
			}

			.buttom-yiwancheng {
				width: 200rpx;
				height: 56rpx;
				margin-right: 40rpx;
				line-height: 56rpx;
				border: solid 1rpx #58d3ae;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #58d3ae;
				margin-left: 180rpx;
			}

			.buttom-yiquxiao {
				width: 200rpx;
				height: 56rpx;
				margin-right: 40rpx;
				line-height: 56rpx;
				border: solid 1rpx #58d3ae;
				font-size: 28rpx;
				text-align: center;
				border-radius: 10rpx;
				color: #58d3ae;
				margin-left: 180rpx;
			}
		}
	}

	.Orderchart {
		display: inline-block;
		width: 250rpx;
		height: 250rpx;
		margin: 30rpx;
		margin-top: 350rpx;
	}

	.Bson {
		font-weight: 900;
	}

	.Bson::after {
		content: '';
		display: block;
		margin-left: 25rpx;
		width: 50rpx;
		margin-top: 10rpx;
		height: 5rpx;
		background-color: #58d3ae;
	}

	/* 标题样式 */
	.Wtext {
		display: inline-block;
		margin-left: 36rpx;
		width: 100rpx;
		text-align: center;
	}

	/* 顶部标题 */
	.Toptitle {
		text-align: center;
		color: #5f5af7;
		font-size: 35rpx;
		font-weight: 900;
		margin-bottom: 35rpx;
		margin-top: 60rpx;
	}

	.total {
		margin-top: -4rpx;
		padding-top: 4rpx;
		background-color: #f5f5f5;
		overflow: hidden;
	}
</style>